/*
 * @FilePath: \flutter_ducafecat_news_getx\lib\pages\main\widgets\lunbo.dart
 * @Date: 2022-07-13 17:10:54
 * @LastEditTime: 2022-07-15 10:28:05
 * @Description: 首页轮播图——顶部，使用flutter_swiper,自定义其页面指示器。使用了GridView,渐变，Stack叠加
 */
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80',
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80',
];
final List<Widget> imageSliders = imgList
    .map(
      (item) => Container(
        // margin: EdgeInsets.all(3.w),
        width: 20.w,
        child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(5.0)),
            child: Stack(
              children: <Widget>[
                Image.network(item, fit: BoxFit.cover, width: 1000.0),
                Positioned(
                  bottom: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Color.fromARGB(200, 0, 0, 0),
                          Color.fromARGB(0, 0, 0, 0)
                        ],
                        begin: Alignment.bottomCenter,
                        end: Alignment.topCenter,
                      ),
                    ),
                    padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
                    child: Text(
                      'No. ${imgList.indexOf(item)} image',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            )),
      ),
    )
    .toList();

///轮播图
class LuoBoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 140.h,
      width: 375.w,
      margin: EdgeInsets.all(10.w),
      child: Swiper(
        // autoplay: true,
        itemCount: imgList.length,
        itemBuilder: (context, index) => Container(
          // margin: EdgeInsets.all(5.w),
          child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.w)),
              child: Stack(
                children: <Widget>[
                  Image.network(imgList[index],
                      fit: BoxFit.cover, width: 1000.0),
                  Positioned(
                    bottom: 0.0,
                    right: 0.0,
                    child: Container(
                      decoration: BoxDecoration(
                          // gradient: LinearGradient(
                          //   //渐变色。
                          //   colors: [
                          //     Color.fromARGB(255, 0, 0, 0),
                          //     Color.fromARGB(155, 0, 0, 0)
                          //   ],
                          //   begin: Alignment.bottomCenter,
                          //   end: Alignment.topCenter,
                          // ),
                          color: index % 2 == 1
                              ? Colors.red[400]
                              : Colors.blue[400],
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10.w))),
                      padding:
                          EdgeInsets.symmetric(vertical: 1.h, horizontal: 4.w),
                      child: Text(
                        index % 2 == 1 ? '有声书' : '数字专辑',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12.sp,
                        ),
                      ),
                    ),
                  ),
                ],
              )),
        ),
        pagination: SwiperPagination(
            alignment: Alignment.bottomCenter,
            builder: SwiperCustomPagination(
              builder: (BuildContext context, SwiperPluginConfig config) {
                return CustomP(config.activeIndex);
              },
            )),
      ),
    );
  }
}

class CustomP extends StatelessWidget {
  final int _currentIndex;
  CustomP(this._currentIndex);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.w,
      child: GridView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: imgList.length,
            childAspectRatio: 4 / 1,
            crossAxisSpacing: 6.w),
        itemBuilder: (context, index) => Container(
          decoration: BoxDecoration(
            color: _currentIndex == index
                ? Colors.white
                : Colors.transparent.withOpacity(0.5),
            borderRadius: BorderRadius.circular(5.w),
          ),
        ),
        itemCount: imgList.length,
      ),
    );
  }
}


///垂直轮播 